<template>
	<ma-body>
		<div slot="header" style="position: sticky;top: 0;z-index: 2;">
			<div style="padding: 2.67vw 5.33vw;">
				<image src="../../../static/img/isBack.png" mode="aspectFill" style="width: 8.53vw;height: 8.53vw;" @tap="toOrderBack"></image>
			</div>
			<!-- 顶部导航栏 -->
			<div class="top_tag">
				<span v-for="(item,index) in list" :class="{ 'Select' : index == currentIndex }"
					@click="toTag(index)">{{item}}</span>
			</div>
		</div>
		<div slot="content" class="content">
			<!-- 下部划动区域 -->
			<swiper :current="currentIndex" @change="swiperChange">
				<swiper-item>
					<ma-refresh pageName="page0">
						<div style="padding-left: 4.27vw;padding-top: 4.27vw;" v-if="page0.list.length != 0">
							<orderCard v-for="item in page0.list" :item="item" @pay="onPay"></orderCard>
						</div>
						<nothing title="暂无订单" :hasImg="false" v-else></nothing>
					</ma-refresh>
					<!-- <nothing title="暂无订单"></nothing> -->
					<!-- 内容区域 -->
				</swiper-item>
				<swiper-item>
					<ma-refresh pageName="page1">
						<div style="padding-left: 4.27vw;padding-top: 4.27vw;" v-if="page1.list.length != 0">
							<orderCard v-for="item in page1.list" :item="item" @pay="onPay"></orderCard>
						</div>
						<nothing title="暂无订单" :hasImg="false" v-else></nothing>
					</ma-refresh>
					<!-- <nothing title="暂无订单"></nothing> -->
					<!-- 内容区域 -->
				</swiper-item>
				<swiper-item>
					<ma-refresh pageName="page2">
						<div style="padding-left: 4.27vw;padding-top: 4.27vw;" v-if="page2.list.length != 0">
							<orderCard v-for="item in page2.list" :item="item"></orderCard>
						</div>
						<nothing title="暂无订单" :hasImg="false" v-else></nothing>
					</ma-refresh>
					<!-- <nothing title="暂无订单"></nothing> -->
					<!-- 内容区域 -->
				</swiper-item>
				<swiper-item>
					<ma-refresh pageName="page3">
						<div style="padding-left: 4.27vw;padding-top: 4.27vw;" v-if="page3.list.length != 0">
							<orderCard v-for="item in page3.list" :item="item"></orderCard>
						</div>
						<nothing title="暂无订单" :hasImg="false" v-else></nothing>
					</ma-refresh>
					<!-- <nothing title="暂无订单"></nothing> -->
					<!-- 内容区域 -->
				</swiper-item>
			</swiper>
			<u-modal v-model="cancelModal" :content="content" @confirm="buy" :show-cancel-button="true"></u-modal>
			<loadingModal ref="loadingModal"></loadingModal>
		</div>
	</ma-body>
</template>

<script>
	import loadingModal from '@/components/loading-modal/loading-modal';
	import Refresh from '@/$ma/common/js/refresh.js';
	import orderCard from '@/subPackA/components/orderCard/orderCard.vue';
	export default {
		components: {
			orderCard,
			loadingModal
		},
		data() {
			return {
				list: ['全部', '待支付', '已完成', '已取消'],
				forList: [1, 2, 3, 4, 5, 6],
				currentIndex: 0,
				height: 0,
				page0: new Refresh(this, {
					apiName: 'getMyList',
					apiData: {
						searchType: "all"
					}
				}),
				page1: new Refresh(this, {
					apiName: 'getMyList',
					apiData: {
						searchType: "waitingPay"
					}
				}),
				page2: new Refresh(this, {
					apiName: 'getMyList',
					apiData: {
						searchType: "done"
					}
				}),
				page3: new Refresh(this, {
					apiName: 'getMyList',
					apiData: {
						searchType: "cancel"
					}
				}),
				cancelModal: false,
				item: {},
				content: '确定购买该数字藏品吗？'
			}
		},
		methods: {
			toOrderBack(){
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			toTag(index) {
				console.log(index);
				this.currentIndex = index;
			},
			swiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			toOrderDetail() {
				this.$ma.route.order_detail({
					status: 1
				})
			},
			onPay(item) {
				console.log('cjilaile')
				this.cancelModal = true;
				this.item = item;
			},
			buy() {
				let id = this.item.info.orderId;
				let skuId = this.item.children[0].skuId;
				console.log('我操，我点了', this.item)
				this.$u.api.onPay({}, id , skuId).then(res => {
					let productInfo = {
						cover: this.item.children[0].skuImg,
						spuTitle: this.item.children[0].spuTitle,
						spuPrice: this.item.children[0].skuPrice,
						type: this.item.children[0].spuType
					}
					this.$ma.route.buyDetail({
						productInfo: JSON.stringify(productInfo),
						orderId: id,
					})
				})
			},
			getOrderGen(){
				this.$u.api.getOrderGen().catch(err=>{
					if(err.bcode == 'ORDER_0005'){
						this.$refs.loadingModal.open({
							msg: '您已成功抢到商品，正在创建订单，请稍后…',
							type: 'loading'
						});
					}
				})
			}
		},
		computed: {
			// 计算当前swiper高度
			isHeight() {
				this.height = 48.27 * (this.forList.length)
				return this.height;
			}
		},
		onLoad() {
			this.page0.onRefresh();
			this.page1.onRefresh();
			this.page2.onRefresh();
			this.page3.onRefresh();
			this.getOrderGen()
		}
	}
</script>

<style lang="scss">
	swiper {
		height: 100%;
	}

	.content {
		height: 100%;
	}

	// 顶部导航栏
	.top_tag {
		width: 100vw;
		height: 11.73vw;
		background-color: #1b1b1b;
		padding: 0 5.33vw;
		display: flex;
		align-items: center;

		span {
			padding: 2.67vw 0;
			color: #555555;
			font-weight: 300;
			font-size: 3.73vw;
			margin-right: 6.4vw;

		}

		.Select {
			color: #FFCE80;
			font-weight: 500;
			border-bottom: 0.53vw solid #FFCE80;
		}
	}

	.swiper {
		width: 100vw;
		height: 100vw;
		display: flex;
		flex-direction: column;
		padding: 0 4.27vw;
		margin-top: 4.27vw;

		swiper-item {
			height: 100%;
		}


	}
</style>
